<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Segment - Toolbar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Segment - Toolbar</ion-title>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment value="Top">
          <ion-segment-button value="Paid">
            <ion-label>Paid</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Free">
            <ion-label>Free</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Top">
            <ion-label>Top</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar class="themed">
        <ion-segment value="Top">
          <ion-segment-button value="Paid">
            <ion-label>Paid</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Free">
            <ion-label>Free</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Top">
            <ion-label>Top</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar color="primary">
        <ion-segment value="Free">
          <ion-segment-button value="Paid">
            <ion-label>Paid</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Free">
            <ion-label>Free</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Top">
            <ion-label>Top</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar color="secondary">
        <ion-segment value="Top">
          <ion-segment-button value="Paid">
            <ion-label>Paid</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Free">
            <ion-label>Free</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Top">
            <ion-label>Top</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar color="danger">
        <ion-segment name="dynamicPropDisable" disabled>
          <ion-segment-button value="Bookmarks">
            <ion-label>Bookmarks</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Reading List">
            <ion-label>Reading List</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Shared Links">
            <ion-label>Shared Links</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar color="dark">
        <ion-segment name="dynamicAttrElem" value="active">
          <ion-segment-button value="active">
            <ion-label>Active</ion-label>
          </ion-segment-button>
          <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
            <ion-label>Disabled</ion-label>
          </ion-segment-button>
          <ion-segment-button value="inactive" disabled="false">
            <ion-label>Inactive</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment value="rainy">
          <ion-segment-button value="sunny">
            <ion-label>Sunny</ion-label>
          </ion-segment-button>
          <ion-segment-button value="rainy">
            <ion-label>Rainy</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar color="primary">
        <ion-segment color="light" value="rainy">
          <ion-segment-button value="sunny">
            Sunny
          </ion-segment-button>
          <ion-segment-button value="rainy">
            Rainy
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <!-- Label only -->
      <ion-toolbar color="warning">
        <ion-segment value="1">
          <ion-segment-button value="1">
            <ion-label>Item One</ion-label>
          </ion-segment-button>
          <ion-segment-button value="2">
            <ion-label>Item Two</ion-label>
          </ion-segment-button>
          <ion-segment-button value="3">
            <ion-label>Item Three</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <!-- Icon only -->
      <ion-toolbar color="secondary">
        <ion-segment value="heart">
          <ion-segment-button value="call">
            <ion-icon name="call"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="heart">
            <ion-icon name="heart"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="pin">
            <ion-icon name="pin"></ion-icon>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <!-- Icon top -->
      <ion-toolbar color="danger">
        <ion-segment value="2">
          <ion-segment-button value="1">
            <ion-label>Item One</ion-label>
            <ion-icon name="call"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="2">
            <ion-label>Item Two</ion-label>
            <ion-icon name="heart"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="3">
            <ion-label>Item Three</ion-label>
            <ion-icon name="pin"></ion-icon>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <!-- Icon bottom -->
      <ion-toolbar color="tertiary">
        <ion-segment value="1">
          <ion-segment-button value="1" layout="icon-bottom">
            <ion-icon name="call"></ion-icon>
            <ion-label>Item One</ion-label>
          </ion-segment-button>
          <ion-segment-button value="2" layout="icon-bottom">
            <ion-icon name="heart"></ion-icon>
            <ion-label>Item Two</ion-label>
          </ion-segment-button>
          <ion-segment-button value="3" layout="icon-bottom">
            <ion-icon name="pin"></ion-icon>
            <ion-label>Item Three</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <!-- Icon start -->
      <ion-toolbar color="dark">
        <ion-segment value="1">
          <ion-segment-button value="1" layout="icon-start">
            <ion-label>Item One</ion-label>
            <ion-icon name="call"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="2" layout="icon-start">
            <ion-label>Item Two</ion-label>
            <ion-icon name="heart"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="3" layout="icon-start">
            <ion-label>Item Three</ion-label>
            <ion-icon name="pin"></ion-icon>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <!-- Icon end -->
      <ion-toolbar color="medium">
        <ion-segment value="1">
          <ion-segment-button value="1" layout="icon-end">
            <ion-icon name="call"></ion-icon>
            <ion-label>Item One</ion-label>
          </ion-segment-button>
          <ion-segment-button value="2" layout="icon-end">
            <ion-icon name="heart"></ion-icon>
            <ion-label>Item Two</ion-label>
          </ion-segment-button>
          <ion-segment-button value="3" layout="icon-end">
            <ion-icon name="pin"></ion-icon>
            <ion-label>Item Three</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <!-- Disabled -->
      <ion-toolbar color="success">
        <ion-segment disabled value="1">
          <ion-segment-button value="1" layout="icon-end">
            <ion-icon name="call"></ion-icon>
            <ion-label>Item One</ion-label>
          </ion-segment-button>
          <ion-segment-button value="2" layout="icon-end">
            <ion-icon name="heart"></ion-icon>
            <ion-label>Item Two</ion-label>
          </ion-segment-button>
          <ion-segment-button value="3" layout="icon-end">
            <ion-icon name="pin"></ion-icon>
            <ion-label>Item Three</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <!-- Color -->
      <ion-toolbar color="light">
        <ion-segment color="secondary" value="1">
          <ion-segment-button value="1" layout="icon-end">
            <ion-icon name="call"></ion-icon>
            <ion-label>Item One</ion-label>
          </ion-segment-button>
          <ion-segment-button value="2" layout="icon-end">
            <ion-icon name="heart"></ion-icon>
            <ion-label>Item Two</ion-label>
          </ion-segment-button>
          <ion-segment-button value="3" layout="icon-end">
            <ion-icon name="pin"></ion-icon>
            <ion-label>Item Three</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

    </ion-header>

    <ion-content class="ion-padding">
      Segment in Toolbar
    </ion-content>

    <style>
      .themed {
        --ion-toolbar-background: #3880ff;
      }

      .ios .themed {
        --ion-toolbar-segment-background: rgba(255, 255, 255, 0.11);
        --ion-toolbar-segment-color: #fff;

        --ion-toolbar-segment-color-checked: #3880ff;
      }

      .md .themed {
        --ion-toolbar-segment-color: rgba(255, 255, 255, 0.6);
        --ion-toolbar-segment-color-checked: #fff;

        --ion-toolbar-segment-indicator-color: #fff;
      }
    </style>

  </ion-app>
</body>

</html>
